<template>
    <div class="bgimage">

        <el-button type="primary" class="button-regist" @click="regist()"
            style="width: 120px;margin-left: 90%;margin-top: 20px;" aria-label="Login Button">
            <span style="font-size: 24px;">Sign Up</span>
        </el-button>


        <div class="login-container">
            <div class="background-container">
                <el-card class="login-card">
                    <img src="../assets/tittle.png" style="width: 180px;height: auto;">
                    <h1 class="title">欢迎使用</h1>
                    <el-form :model="loginParam" ref="loginParam" label-position="left" label-width="100px"
                        class="form-container">
                        <el-form-item label="用户名">
                            <el-input v-model="loginParam.username" placeholder="请输入用户名" class="input-box"
                                id="username-input" />
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input type="password" v-model="loginParam.password" placeholder="请输入密码"
                                class="input-box" id="password-input" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="button-login" @click="submitForm()"
                                aria-label="Login Button">登录</el-button>

                        </el-form-item>
                        <!-- {{loginParam.account_number}}
                        {{loginParam.account_password}} -->
                    </el-form>


                    <div class="other-elements">

                    </div>

                    <div class="contact-container">
                        <p>需要帮助？请联系我们的客服：电话：400-666-8888 | 邮箱：help@OA.com</p>
                    </div>
                </el-card>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        data() {
            return {
                loginParam: {
                    username:'',
                    password:''
                },
                Account: [],
            };
        },
        methods: {
            submitForm() {
                this.$axios
                    .post('admin/login', this.loginParam)
                    .then(response => {
                        let result = response.data;
                        console.log(result.data)
                        console.log(result.data == 'Login successful')
                        if (result.data == 'Login successful') {
                            this.$message({
                                message: result.data,
                                type: 'success'
                            });
                            // this.$router.push('/index');
                            this.$router.push({ path: '/index', query: { username: this.loginParam.username }});             
                        } else {
                            this.$message({
                                message: result.data,
                                type: 'error'
                            });
                        }
                    })
                    .catch(err => {
                        alert(err);
                    });
            },
            regist(){
                this.$router.push('/registe'); 
            }
        }
    };
</script>

<style scoped>
    .bgimage {
        height: 100%;
        width: 100%;
        /*以下两种路径方式都可以*/
        /*background-image: url('../../../../assets/images/logo.png');*/
        background-image: url(../assets/demobg.jpg);
        background-size: cover
    }

    .login-container {
        height: 765px;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .background-container {
        /* background-color: #f2f6fc; */
        padding: 50px;
        border-radius: 20px;
    }

    .login-card {
        margin-top: -200px;
        width: 450px;
        border-radius: 20px;
        /* box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); */
        background-color: rgba(255, 255, 255, 0.5);
    }

    .title {
        font-size: 32px;
        text-align: center;
        margin-top: 40px;
    }

    .input-box {
        margin-left: -40px;
    }

    .form-container {
        margin-top: 40px;
        padding: 0 30px 30px 30px;
    }

    .button-login {
        margin-left: -40px;
        width: 100%;
        background: #00a651;
        border-color: #00a651;
        color: #fff;
    }

    .button-regist {
        
        height: 45px;
        padding: 0 10px;
        margin: 0 0 8px 0;
        font-size: 16px;
        font-weight: 700;
        line-height: 45px;
        border: 0;
        border-radius: 2px;
        color: #fff;
        background: rgba(255, 255, 255, .33);

    }

    .other-elements {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }

    .text {
        font-size: 24px;
    }

    .button {
        width: 100px;
    }
</style>